import Charts // !
import SwiftUI

struct OtherChartMarks : View {
    @State var classroom: Array<Student> = [
        Student(height: 165.0, name: "Foo"),
        Student(height: 150.0, name: "Boo"),
        Student(height: 140.0, name: "John"),
        Student(height: 155.0, name: "Doe")
    ]
    
    var body: some View {
        VStack(spacing: 20) {
            Text("Other chart marks")
                .font(.largeTitle)
            
            VStack {
                Text("Bar mark")
                Chart(classroom) {
                    // $0 - 每一个 student
                    // $0.height
                    BarMark(
                        x: .value("Height", "\($0.height)"),
                        y: .value("Value", $0.height)
                    )
                }    
            }
            
            VStack {
                Text("Line mark")
                Chart(classroom) {
                    LineMark(
                        x: .value("Height", "\($0.height)"),
                        y: .value("Value", $0.height)
                    )
                }
            }
            
            
            VStack {
                Text("Area mark")
                Chart(classroom) {
                    AreaMark(
                        x: .value("Height", "\($0.height)"),
                        y: .value("Value", $0.height)
                    )
                }    
            }
            
            
            VStack {
                Text("Point mark")
                Chart(classroom) {
                    PointMark(
                        x: .value("Height", "\($0.height)"),
                        y: .value("Value", $0.height)
                    )
                }    
            }
            
            
            VStack {
                Text("Rectangle mark")
                Chart(classroom) {
                    RectangleMark(
                        x: .value("Height", "\($0.height)"),
                        y: .value("Value", $0.height)
                    )
                }    
            }
            
        }
        .padding()
    }
}
